<template>
  <div>
    <!-- 筛选区域-->
    <div style="width: 80%;margin: 0 auto;">
      <h2 style="text-align: left;color:#777;border-bottom: #ccc 1px solid;font-size:15px;height: 40px;line-height: 40px">书籍分类</h2>
      <table class="book_select">
        <tr>
          <th style="line-height: 5px">书籍类型:</th>
          <td>
            <el-radio-group @change="getPageBook" v-model="pageData.bt_id">
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="1">教育学</el-radio-button>
              <el-radio-button label="2">经济学</el-radio-button>
              <el-radio-button label="3">心理学</el-radio-button>
              <el-radio-button label="4">人物传记</el-radio-button>
              <el-radio-button label="5">外国文学</el-radio-button>
              <el-radio-button label="6">中国古代史</el-radio-button>
              <el-radio-button label="7">中国近代史</el-radio-button>
              <el-radio-button label="8">长篇历史小说</el-radio-button>
              <el-radio-button label="9">悬疑推理小说</el-radio-button>
              <el-radio-button label="10">中国当代小说</el-radio-button>
              <el-radio-button label="31">惊悚小说</el-radio-button>
              <el-radio-button label="32">恐怖小说</el-radio-button>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <th>书籍价格:</th>
          <td>
            <input v-model="pageData.minPrice" size="6"  type="text"/> -- <input v-model="pageData.maxPrice" size="6" type="text"/>
            <button @click="searchByPrice" style="padding: 3px 8px;margin-left: 10px;">搜索</button>
          </td>
        </tr>
      </table>
    </div>
    <!--  书籍列表-->
    <el-card>
      <div style="display: flex;flex-wrap: wrap;justify-content: space-between">
        <div style="width: 20%;height: 280px;margin: 10px 20px;border:1px solid" @click="toBookDetail(book)" v-for="book in bookList" :key="book.b_id">
          <img :src="book.b_cover" style="width: 100%;height: 230px;margin-bottom: 10px">
          <div style="display: flex; justify-content: center; align-items: center;">
            <p style="margin-right: 10px;">{{book.b_name}}</p>
            <p style="margin-right: 10px;">{{book.bt_name}}</p>
            <span  style="background-color: transparent; padding: 5px 10px; font-weight: bold; color: #ff6347;">{{book.b_price}}元</span>
          </div>
        </div>
      </div>
    </el-card>
    <!--  分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageData.page"
        :page-size="pageData.size"
        layout="total,prev, pager, next, jumper"
        :total="pageData.totalPage">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "AllBooks",
  data(){
    return{
      bookList:[],
      pageData: {
        page: 1,
        size: 12,
        totalPage: 0,
        bt_id: "",
        bt_name: "",
        minPrice:'',
        maxPrice:'',
      }
    }
  },
  methods: {
    searchByPrice(){
      if(this.pageData.minPrice > this.pageData.maxPrice){
        this.$message.error('价格区间错误')
        this.pageData.minPrice = ''
        this.pageData.maxPrice =''
      }else{
        this.getPageBook()
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

    },
    handleCurrentChange(val) {
      this.pageData.page = val
      this.getPageBook()
      console.log(`当前页: ${val}`);
    },
    toBookDetail(book){
      //跳转到书籍详情页
      let b_id = book.b_id;
      this.$router.push({path:"book_detail",query:{b_id}})
    },
    // 获取分页数据
    async getPageBook() {
      const {data: res} = await this.$axios.get("/book/getPageBook", {params: this.pageData})
      console.log(res)
      this.bookList = res.data.records
      this.pageData.totalPage = res.data.total

    }
  },
  mounted() {
    this.getPageBook()
  }
}
</script>

<style scoped>

.book_select {
  width: 100%;
  height: 10px;
  line-height: 5px;
}

.book_select th {
  padding: 10px;
  text-align: left;
  font-size: 13px;
  background: white;
  font-width: 40px;
  width: 80px;
  height: 10px;
  line-height: 15px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.book_select td {
  text-align: left;
  padding: 10px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
}

.book_select tr {
  height: 10px;
}

.bookList:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>